import React from 'react';
import { 
  View, 
  Text, 
  Image, 
  Button, 
  StyleSheet, 
  SafeAreaView 
} from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

const WelcomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <View style={styles.logoContainer}>
          <FontAwesome name="robot" size={80} color="#4F46E5" />
        </View>
        <Text style={styles.title}>AI情感聊天助手</Text>
        <Text style={styles.subtitle}>智能感知你的情绪，提供个性化支持</Text>
        
        <View style={styles.featureContainer}>
          <View style={styles.featureItem}>
            <FontAwesome name="comments" size={24} color="#4F46E5" />
            <Text style={styles.featureText}>情感对话</Text>
          </View>
          <View style={styles.featureItem}>
            <FontAwesome name="smile-o" size={24} color="#10B981" />
            <Text style={styles.featureText}>情绪识别</Text>
          </View>
          <View style={styles.featureItem}>
            <FontAwesome name="heart" size={24} color="#EF4444" />
            <Text style={styles.featureText}>情感支持</Text>
          </View>
        </View>
        
        <Button 
          title="开始聊天" 
          color="#4F46E5" 
          onPress={() => navigation.navigate('Chat')} 
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  },
  content: {
    flex: 1,
    padding: 32,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: '#E0E7FF',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 32
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#1F2937',
    marginBottom: 12
  },
  subtitle: {
    fontSize: 16,
    color: '#6B7280',
    textAlign: 'center',
    marginBottom: 48
  },
  featureContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginBottom: 48
  },
  featureItem: {
    alignItems: 'center'
  },
  featureText: {
    marginTop: 8,
    fontSize: 14,
    color: '#4B5563'
  }
});

export default WelcomeScreen;    